<template>
  <div id="container">
    <panelGroup
      @handleSetLineChartData="handleSetLineChartData"
      :panel-data="panelData"
    />
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <s-line v-if="display == 'user'" :chart-data="lineChartData" />
      <d-line v-else-if="display == 'gender'" :chartData="lineChartData" />
    </el-row>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <rose-pie :chartData="videoCategoryData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <rose-pie :chartData="videoCategoryData" />
        </div>
      </el-col>
      <!--       <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <rose-pie />
        </div>
      </el-col> -->
    </el-row>
    <!--     <div class="chart-wrapper">
      <rose-pie />
    </div> -->
  </div>
</template>

<script>
import RosePie from "@/components/echarts/RosePie.vue";
import SLine from "@/components/echarts/SingleLine.vue";
import DLine from "@/components/echarts/DoubleLine.vue";
import panelGroup from "@/components/PanelGroup.vue";
import {
  getRegisterUserData,
  getVideoOfWeek,
  getArticleOfWeek,
  videoCategoryCount,
} from "@/api/dataManage";

/* const userChartData = {
  data: [
    ["Mon", "11"],
    ["Tue", "22"],
    ["Wed", "33"],
    ["Thu", "14"],
    ["Fri", "55"],
    ["Sat", "26"],
    ["Sun", "77"],
  ],
}; */

/* const genderChartDatas = {
  data_1: {
    name: "men",
    data: [
      ["Mon", 11],
      ["Tue", 22],
      ["Wed", 33],
      ["Thu", 14],
      ["Fri", 55],
      ["Sat", 26],
      ["Sun", 77],
    ],
  },
  data_2: {
    name: "women",
    data: [
      ["Mon", 21],
      ["Tue", 12],
      ["Wed", 53],
      ["Thu", 24],
      ["Fri", 35],
      ["Sat", 46],
      ["Sun", 27],
    ],
  },
}; */

const panelData = {
  user: "用户",
  gender: "内容",
};

export default {
  name: "DataOverview",
  components: {
    panelGroup,
    RosePie,
    SLine,
    DLine,
  },
  data() {
    return {
      // panelData: ["user", "gender"],
      panelData: panelData,
      lineChartData: [],
      registerUserData: [],
      videoArticleData: {},
      videoCategoryData: [],
      display: "user", // 控制需要显示的数据类型
    };
  },
  created() {
    getRegisterUserData().then((res) => {
      this.registerUserData = this.formatXAxisForList(res.data);
      // lineCharData的初始数据是注册用户的数据
      this.lineChartData = this.formatXAxisForList(res.data);
    });
    // 获取过去一周内视频的投稿量（前端自行封装数据对象）
    getVideoOfWeek().then((res) => {
      let data_1 = { name: "Video", data: this.formatXAxisForList(res.data) };
      this.$set(this.videoArticleData, "data_1", data_1);
    });
    // 获取过去一周内文章的投稿量（前端自行封装数据对象）
    getArticleOfWeek().then((res) => {
      let data_2 = {
        name: "Article",
        data: this.formatXAxisForList(res.data),
      };
      this.$set(this.videoArticleData, "data_2", data_2);
    });
    // 视频类目数量（渲染饼状图）
    videoCategoryCount().then((res) => {
      this.videoCategoryData = res.data;
    });
  },
  methods: {
    // panelGroup选项卡的回调方法
    handleSetLineChartData(panel_item) {
      if (panel_item === "user") {
        this.lineChartData = this.registerUserData;
        this.display = "user";
      } else if (panel_item === "gender") {
        this.lineChartData = this.videoArticleData;
        this.display = "gender";
      }
    },
    // 格式化xAxis data
    formatXAxisForObject(data) {
      let oldData = data;
      const keys = Object.keys(oldData);
      for (let i = 0; i < keys.length; i++) {
        console.log("11");
        for (let j = 0; j < oldData[keys[i]]["data"].length; j++) {
          console.log("22");
          // console.log(oldData[keys[i]]["data"]);
          oldData[keys[i]]["data"][j][0] =
            parseInt(oldData[keys[i]]["data"][j][0]) + "日";
        }
      }
    },
    // 格式化xAxis.data的格式
    formatXAxisForList(data) {
      for (let i = 0; i < data.length; i++) {
        data[i][0] = parseInt(data[i][0]) + "日";
      }
      console.log("++++++++++++>", data);
      return data;
    },
  },
};
</script>

<style scoped>
#container {
  height: 100%;
  /* background-color: #fff; */
}

.chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}
</style>